<template>
  <div class="container">
    <div class="left">
      <div class="scrollbar_wrap">
        <el-menu
          default-active="/admin/order"
          @open="handleOpen"
          router
          background-color="#F2F6FC"
          @close="handleClose">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>管理中心</span>
            </template>
            <el-menu-item index="/admin/order">订单详情</el-menu-item>
            <el-menu-item index="/admin/loginHistory">登录记录</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>编辑页面</span>
            </template>
            <el-menu-item index="/admin/advertising">广告编辑</el-menu-item>
            <el-menu-item index="/admin/news">新闻动态</el-menu-item>
          </el-submenu>
          <el-menu-item index="/admin/fcode">
            <i class="el-icon-edit"></i>
            <span slot="title">生成F码</span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>管理设置</span>
            </template>
            <el-menu-item v-if="sign=='0'" index="/admin/userControl">管理权限</el-menu-item>
            <el-menu-item index="/admin/updatePassword">修改密码</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div class="right">
      <router-view></router-view>
      <router-view name="news"></router-view>
    </div>
  </div>
</template>

<script>
  import {getCookie} from '../util/cookie'

  export default {
    name: "container-main",
    data() {
      return {
        sign: getCookie('sign'),
        menuIndex: '/admin/'
      }
    },
    methods: {
      handleOpen(key, keyPath) {
      },
      handleClose(key, keyPath) {
      }
    },
    watch: {
      $route(e) {
        this.menuIndex = e.path
      }
    }
  }
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    position: relative;
  }

  .container > .left {
    width: 240px;
    position: fixed;
    top: 0;
    bottom: 40px;
    margin-top: 60px;
    overflow: hidden;
    transition: padding-top .3s
  }

  .left > .scrollbar_wrap {
    margin-bottom: -17px;
    margin-right: -17px;
    height: 100%;
    overflow-x: auto;
  }

  .container > .right {
    padding: 10px 30px 0 270px;
    box-sizing: border-box;
  }

  a.router-link-active {
    color: #f66;
  }

  li.router-link-active a {
    color: #f66;
  }
</style>
